<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
          *{
                margin: 0px;
                padding: 0px;
                list-style: none;
                text-decoration:none
            }
            .header{
                height: 500px;
                background:url('images/bg.jpg') repeat-x;
            }
            .con{
                width: 970px;
                height: 376px;
                margin:47px auto 30px;
            }
            .footer{
                width: 970px;
                height: 51px;
                margin:0px auto;
            }
            .nav,.banner{
                width:970px;
                margin:0px auto;
            }
            .nav h1{
                float: left;
            }
            .nav ul{
                float: right;
            }
            .nav img{
                height: 43px;
                margin-top: 17px;
            }
            .nav li{
                float: left;
                margin-right: 14px;
                margin-top: 21px;
                padding: 6px;
               
            }
            .nav li:hover{
                background:red;
                border-radius: 20px;
            }
            .nav a{
                color:#fff;
                font-size: 18px;
                text-decoration: none;
            }
           
             .nav{
                 height: 74px;
             }
             .banner .left{
                 float: left;
             }
             .banner .right{
                 float: right;
             }
             .banner h6{
                 font-size: 26px;
                 margin: 54px 0px 14px 0px;
                 font-weight: bold;
             }
             .banner .list li{
                 line-height: 31px;
                 font-size: 16px;
             }
             .banner .c li{
                 font-size: 12px;
                 line-height: 20px;
             }
             .banner .c a{
                 color:#609700;
                 text-decoration: none;
             }
             .con .left{
                 width: 631px;
                 float: left;
             }
             .con .right{
                 width: 322px;
                 float: right;
             }
             .con .left li{
                 float: left;
                 width: 214px;
             }
             .con .left .last{
                 width: 196px;
             }
             .con .right i{
                 color:red
             }
             .con .right span{
                 float: right;
             }
             .footer .left{
                 float: left;
             }
             .footer .right{
                 float: right;
             }
             .footer .bottom{
                 float: left;
                 width: 970px;
             }
</style>
<body>
    <div class="header">
        <div class="nav">
            <h1>
                <a href="">
                    <img src="images/logo.png" alt="">
                </a>
            </h1>
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">帮助与反馈</a></li>
                <li><a href="">公众平台</a></li>
                <li><a href="">开发平台</a></li>
                <li><a href="">微信支付</a></li>
                <li><a href="">微信广告</a></li>
                <li><a href="">企业微信</a></li>
                <li><a href="">微信网页版</a></li>
            </ul>
        </div>
        <div class="banner">
            <div class="left">
                <h6>微信，是一个生活方式</h6>
                <ul class="list">
                    <li>超过十亿人使用的手机应用
                    </li>
                    <li>支持发送语音短信、视频、图片和文字</li>
                    <li>
                        可以群聊，仅耗少量流量，适合大部分智能手机</li>
                </ul>
                <img src="images/dowm.png" alt="">
                <ul class="c">
                    <li>
                        <a href="">忘记了微信账号或密码？</a>
                    </li>
                    <li>
                        <a href="">自助解除登录或功能限制</a>
                    </li>
                    <li>
                        <a href="">冻结或解冻微信帐号</a>
                    </li>
                </ul>
            </div>
            <img src="images/com.png" alt="" class="right">
             
        </div>
    </div>
    <div class="con">
        <div class="left">
            <img src="images/list.png" alt="">
            <ul>
                <li>
                    <h6>微信网页版</h6>
                    <p>扫一扫二维码</p>
                    <p>就能在浏览器上使用微信</p>
                    <a href="">了解更多</a>
                </li>
                <li>
                    <h6>微信Mac版</h6>
                    <p>极致简洁，迅捷沟通</p>
                     
                    <a href="">了解更多</a>
                </li>
                <li class="last">
                    <h6>微信网页版Windows版</h6>
                    <p>让沟通更方便</p>
                    <a href="">了解更多</a>
                </li>
            </ul>
        </div>
        <div class="right">
            <h6>最新消息</h6>
            <ul>
                <li>
                    微信8.0.6forAndroid正式版发布 <i>NEW</i> <span>03-30</span>
                </li>
                <li>
                   微信8.0.6forios正式版发布 <i>NEW</i> <span>03-30</span>
                </li>
                <li>
                    微信3.0.0forMac正式版发布 <i>NEW</i> <span>03-30</span>
                </li>
                <li>
                   微信3.2.1forWindows正式版发布 <i>NEW</i> <span>03-30</span>
                </li>

            </ul>
        </div>
    </div>
    <div class="footer">
       <p class="left"> 关于腾讯 | 服务条款 | 使用规范 | 客服中心 | 隐私保护指引</p>
        <p class="right">简体中文 |  繁體中文 |  English</p>
       <p class="bottom">@1998-2021TencentInc.AllRightsReeserved</p>
    </div>
</body>
</html>